<template>
  <view class="center-deatil">
    <view class="username">未容谷雨泪胭脂</view>
    <view class="myId">抖音号: 445133808</view>
    <view class="content">你还没有填写个人简介,点击添加...</view>
    <view class="tags">
      <view class="tag">19岁</view>
      <view class="tag">山东</view>
      <view class="tag">未容谷雨泪胭脂</view>
    </view>
    <view class="info">
      <view class="module">
        <text class="num">9999w</text>
        <text>获赞</text>
      </view>
      <view class="module">
        <text class="num">9999w</text>
        <text>关注</text>
      </view>
      <view class="module">
        <text class="num">999w</text>
        <text>粉丝</text>
      </view>
    </view>
    <view class="snapshot">
      <text class="iconfont icon-shumajiadian"></text>
      <text>添加随拍</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CenterDetail',
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.center-deatil {
  padding: 0 20rpx;
  margin-top: 20rpx;
  .username {
    font-size: 36rpx;
    color: #fff;
  }
  .myId {
    font-size: 26rpx;
    margin-top: 20rpx;
    margin-bottom: 30rpx;
    color: gray;
  }
  .content {
    font-size: 26rpx;
    color: #fff;
  }
  .tags {
    display: flex;
    margin: 20rpx 0;
    .tag {
      height: 30rpx;
      margin: 0 10rpx;
      padding: 0 10rpx;
      background: gray;
      font-size: 28rpx;
      line-height: 30rpx;
      color: #eee;
    }
  }
  .info {
    display: flex;
    .module {
      margin-right: 20rpx;
      color: gray;
      .num {
        color: #fff;
        margin-right: 10rpx;
        font-size: 40rpx;
      }
    }
  }
  .snapshot {
    height: 80rpx;
    background: #393b45;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    margin-top: 20rpx;
    border-radius: 8rpx;
    box-shadow: 0 0 3rpx 3rpx #000;
    .icon-shumajiadian {
      margin-right: 20rpx;
    }
  }
}
</style>
